<nz-layout>
<nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
    <div class="logo" routerLink="welcome">
      <span nz-icon nzType="user" nzTheme="outline"></span>
      @if(!isCollapsed){<strong>宋诗宣</strong>}@else{<strong>宋</strong>}
      
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline">
      <li nz-submenu nzTitle="用户管理" nzIcon="user">
        <ul>
          <!-- routerLinkActive="activebutton"配合css实现选中样式的添加 -->
          <li routerLink="/list1" routerLinkActive="activebutton" nz-menu-item>列表1</li>
          <li routerLink="/list2" routerLinkActive="activebutton" nz-menu-item>列表2</li>
          <li routerLink="/list3" routerLinkActive="activebutton" nz-menu-item>列表3</li>
          <li routerLink="/list4" routerLinkActive="activebutton" nz-menu-item>列表4</li>
          </ul>
      </li>
      <li nz-submenu nzTitle="其他" nzIcon="team">
        <ul>
          <li routerLink="/other1" routerLinkActive="activebutton" nz-menu-item>其他1</li>
          <li routerLink="/other2" routerLinkActive="activebutton" nz-menu-item>其他2</li>

        </ul>
      </li>
      <li nz-menu-item>
        <span nz-icon nzType="file"></span>
        <span routerLink="/text">文本</span>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <span
        class="trigger"
        nz-icon
        [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
        (click)="isCollapsed = !isCollapsed"
      ></span>

    </nz-header>

    <nz-content>
      <nz-breadcrumb>
        <ng-container>
          @for(item of breadcrumbItems;track item){
            <nz-breadcrumb-item>{{item.name}}</nz-breadcrumb-item>
          }
        <!-- <nz-breadcrumb-item>Bill</nz-breadcrumb-item> -->
      </ng-container>
      </nz-breadcrumb>
      <!-- long-div也可以看成content -->
      <div class="long-div" #divTarget>
        <router-outlet></router-outlet>
        <!-- <div class="long-div-inner"></div> -->
        <nz-back-top [nzVisibilityHeight]="100" [nzTarget]="divTarget"></nz-back-top>
        
      </div>

      
    </nz-content>
    <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
  </nz-layout>
</nz-layout>
